<template>
  <n-card content-style="padding: 6px 16px;" style="margin-top: 20px;">
    <n-list>
      <n-list-item>
        <n-thing title="新消息通知声音" />
        <template #suffix>
          <n-switch v-model:value="form.newMessage" size="small" />
        </template>
      </n-list-item>

      <n-list-item>
        <n-thing title="语音和视频通话通知声音" />
        <template #suffix>
          <n-switch v-model:value="form.callMessage" size="small" />
        </template>
      </n-list-item>

    </n-list>
  </n-card>

  <div style="margin-left: 10px;">
    <div style="margin-top: 16px;">通知标记</div>
    <div class="my-desc">有内容更新时，侧边栏中该功能图标将出现标记提示</div>
  </div>

  <n-card content-style="padding: 6px 16px;" style="margin-top: 10px;">
    <n-list>

      <n-list-item>
        <template #prefix>
          <svg-icon name="wx-friends-circle" />
        </template>
        <n-thing title="朋友圈" />
        <template #suffix>
          <n-switch v-model:value="form.friendsCircle" size="small" />
        </template>
      </n-list-item>

    </n-list>
  </n-card>
</template>

<script setup>
import { ref } from "vue";

const form = ref({
  newMessage: true,
  callMessage: true,
  friendsCircle: true,
});

</script>

<style lang="scss" scoped>
@use "@/assets/css/n-list-reset.scss";
</style>

